<template>
  <div class="bar-chart-17 chart" ref="barChart17"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart17 = ref(null);
const echarts = inject("$echarts");

let seriesData = [
  { stock: "其他", fundPost: "0.90" },
  { stock: "住建部门", fundPost: "0.94" },
  { stock: "水利部门", fundPost: "0.94" },
  { stock: "金融部门", fundPost: "0.94" },
  { stock: "旅游部门", fundPost: "0.94" },
  { stock: "城管部门", fundPost: "0.94" },
  { stock: "交通部门", fundPost: "0.95" },
  { stock: "公安部门", fundPost: "0.98" },
];

let attackSourcesColor = [
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#EB3B5A" },
    { offset: 1, color: "#FE9C5A" },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#FA8231" },
    { offset: 1, color: "#FFD14C" },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#F7B731" },
    { offset: 1, color: "#FFEE96" },
  ]),
  new echarts.graphic.LinearGradient(0, 1, 1, 1, [
    { offset: 0, color: "#395CFE" },
    { offset: 1, color: "#2EC7CF" },
  ]),
];
let attaData = [];
let topName = [];
seriesData.forEach((it, index) => {
  attaData.push(it.fundPost);
  topName.push(it.stock);
});
let maxNum = Math.max(...attaData);
let salvProMax = []; // 背景按最大值
for (let i = 0; i < attaData.length; i++) {
  salvProMax.push(maxNum);
}
function attackSourcesDataFmt(sData) {
  let sss = [];
  sData.forEach(function (item, i) {
    let itemStyle = {
      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
    };
    sss.push({
      value: item,
      itemStyle: itemStyle,
    });
  });
  return sss;
}

const option = {
  compCode: "C202309033",
  animationDuration: 3000,
  animationEasing: "cubicInOut",
  backgroundColor: "#000",
  tooltip: {
    show: true,
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
  },
  color: ["#F7B731"],
  grid: {
    left: "0%",
    right: "0%",
    width: "100%",
    bottom: "0%",
    top: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",

    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: [
    {
      // 名称
      type: "category",
      offset: -10,
      position: "left",
      axisLine: {
        show: false,
      },
      inverse: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: ["#fff"],
        align: "left",
        verticalAlign: "bottom",
        lineHeight: 50,
        fontSize: 16,
        textStyle: {
          color: "#fff",
          fontSize: 16,
        },
      },
      data: topName,
    },
  ],
  series: [
    {
      zlevel: 1,
      type: "bar",
      barWidth: "15px",
      animationDuration: 1500,
      data: attackSourcesDataFmt(attaData),
      align: "center",
      itemStyle: {
        normal: {
          barBorderRadius: 15,
        },
      },
      label: {
        show: true,
        fontSize: 16,
        color: "#fff",
        textBorderWidth: 2,
        padding: [5, 0, 0, 0],
      },
    },
    {
      type: "bar",
      barWidth: 15,
      barGap: "-100%",
      margin: "20",
      data: salvProMax,
      textStyle: {
        // 图例文字的样式
        fontSize: 10,
        color: "#fff",
      },
      itemStyle: {
        normal: {
          color: "#05325F",
          // width:"100%",
          fontSize: 10,
          barBorderRadius: 15,
        },
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart17.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
